<template>
  <div :class="$style.menu">
    <div class="search-menu">
      <el-select
        v-show="showSearchInput"
        v-model="searchSelected"
        @change="handleSearchChange"
        filterable
        remote
        placeholder="请输入关键词">
        <el-option
          v-for="(item, index) in menuDataList"
          :key="item.path+'_'+index"
          :label="item.label"
          :value="item.path">
        </el-option>
        <span style="padding:9px 4px" slot="prefix" class="el-icon-search">
        </span>
      </el-select>
    </div>
    <el-menu
      :collapse="collapse"
      :unique-opened="false"
      background-color="#222d32"
      text-color="#b8c7ce"
      active-text-color="#FFF"
      :default-active="defaultActive"
      @select="handleSelect">
      <template v-for="(item, index) in menuData">

        <el-submenu v-if="item.children && item.children.length > 0" :index="index+''" :key="index">
          <template slot="title">
            <i :class="menuIcon(item.label)||'el-icon-menu'"></i>
            <span>{{item.label}}</span>
          </template>
          <el-menu-item :index="index+'-'+childIndex" v-for="(item, childIndex) in item.children" :key="childIndex">{{item.label}}</el-menu-item>
        </el-submenu>

        <el-menu-item v-else :index="index+''" :key="index">
          <i :class="menuIcon(item.label)||'el-icon-menu'"></i>
          <span slot="title">{{item.label}}</span>
        </el-menu-item>

      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    props: {
      keepAlive: Boolean,
       collapse: Boolean
    },
    data() {
      return {
        defaultActive: '',
        showSearchInput: true,
        searchSelected: ''
      }
    },
    computed: {
      menuData() {
        return this.$store.state.RouterCache.menuData
      },
      activeView() {
        return this.$store.state.RouterCache.activeViewPath
      },
      menuDataList() {
        return this.$store.getters['RouterCache/menuDataList']
      }
    },
    mounted() {
      //监听路由变化，缓存页面
      this.$watch('$route', ()=> {
        this.handleRouterChange()
      })
      this.handleRouterChange();

      //监听菜单收缩、展开
      this.$watch('collapse', (isClose)=> {
        if (isClose) {
          this.showSearchInput = false;
        } else {
          setTimeout(()=> {
            this.showSearchInput = true;
          }, 300)
        }
      })
    },
    methods: {
      handleRouterChange() {
        const view = this.$route.matched[this.$route.matched.length - 1].components.default;
        let label = '';
        JSON.parse(JSON.stringify(this.menuData)).forEach((item, index)=> {
          if (item.path && item.path === this.$route.path) {
            label = item.label;
            this.defaultActive = index+'';
          } else if (item.children && item.children.length > 0) {
            item.children.forEach((child, childIndex)=> {
              if (child.path && child.path === this.$route.path) {
                label = child.label;
                this.defaultActive = index+'-'+childIndex;
              }
            })
          }
        });

        //要缓存页面，必须设置name
        if (!(view.name && this.keepAlive)) {
          return
        }

        const page = {
          path: this.$route.path,  //路由 path
          label: label,   //名称
          name: view.name //页面组件 name
        }

        this.$store.commit('RouterCache/addCacheView', page); //缓存路由
        this.$store.commit('RouterCache/setActiveViewName', page.name); //设置当前激活的路由
      },
      //点击菜单跳转页面
      handleSelect(index) {
        index = index.split('-');
        if (index.length === 1) {
          this.$router.push(this.menuData[index[0]].path)
        } else {
          this.$router.push(this.menuData[index[0]].children[index[1]].path)
        }
      },
      //点击搜索菜单结果选项
      handleSearchChange(value) {
        this.$router.push(value)
        this.searchSelected = ''
      },
      //菜单图标
      menuIcon(name) {
        return {
          '首页': 'el-icon-star-off',
        }[name]
      }
    }
  }
</script>

<style module lang="scss">
 .menu :global {
   .el-menu {
    border-right: 0;
    &:not(.el-menu--collapse) {
      width: 200px;
    }
    .el-menu-item {
      border-left: 3px solid transparent;
      &.is-active {
        background: #1E282C !important;
        border-left-color: $color-primary;
      }
    }
    .el-menu-item-group {
      ul {
        .el-menu-item  {
          padding-left: 55px !important;
        }
      }
    }
  }
  .el-submenu, .el-menu {
    [class^="icon-"]  {
      margin-right: 5px;
    }
  }
  .search-menu {
    padding: 10px;
    //height: 52px;
    max-width: 200px;
    box-sizing: border-box;
    .is-focus .el-input__inner {
      background: #FFF;
    }
    .el-input__inner {
      background: #374850;
      border: 0;
    }
  }
 }
</style>